<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/fullpage.min.css" />
    <link rel="stylesheet" href="./css/swiper.min.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.mousewheel.js"></script>
    <link rel="stylesheet" href="./css/app.css">
    <link rel="stylesheet" href="./css/index2.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <script src="./js/fullpage.min.js"></script>
    <style>
        body {
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-wrapper {
            transition-delay: .3s;
        }

        .swiper-container {
            width: 100vw;
            height: 100vh;
        }

        .swiper-slide {
            font-size: 18px;
            background: #fff;


            /* padding-top: 64px; */

        }

        .margin-left {
            margin-left: 280px;
        }

        .margin-right {
            margin-right: 600px;
        }

        .swiper-slide:nth-child(1) {
            color: #fff;
        }

        .swiper-slide:nth-child(2) {
            color: #fff;
        }



        .ani-slide p {
            transform: translateX(0);
            opacity: 1;
        }



        .swiper-container-vertical>.swiper-pagination-bullets {
            right: 350px;
            top: 55% !important;
        }

        .swiper-pagination-bullet-active {
            opacity: 1;

            background: #69B35D;
        }
    </style>

</head>

<style>

</style>

<body>

    <div class="header">
        <div class=" flex flex-justify-between flex-align-center" style="width: 1200px;">
            <img class="logo" src="./image/logo.png" class="logo">
            <div class="flex menu flex-align-center">
                <div class="name">我要装修 <span class="iconfont icon-xiajiantou"></span></div>
                <div class="name">运营中心招募</div>
                <div class="name">服务者招募</div>
                <div class="name">关于考拉</div>
                <div class="name">家居快讯</div>
                <div class="name">下载app</div>
                <button type="button">登录</button>
            </div>
        </div>
    </div>
    <div id="fullpage">
        <div class="section   flex flex-align-center flex-justify-center ">

            <div class="box_1 flex  flex-justify-between flex-align-center">
                <img style="width: 300px;height: 620px;" src="./image/Body.png">
                <div>
                    <img src="./image/2.png" />
                    <div class="flex flex-align-center box_2">
                        <img src="./image/3.png" />
                        <div>扫描二维码下载APP</div>
                    </div>

                </div>
            </div>
        </div>


        <div class="section active">
            <img src="./image/5.png" class="sb" alt="">
            <div class="swiper-container " >
                <div class="swiper-wrapper" style="width: 100vw;">
                    <div class="swiper-slide  margin-left flex flex-align-center flex-justify-center"
                        style="margin-top: 64px;">
                        <img src="./image/10.png" class="swiper-left-image" alt="">
                        <img src="./image/10.png" class="swiper-right-image" alt="">
                    </div>
                    <div class="swiper-slide margin-left flex flex-align-center flex-justify-center">
                        <img src="./image/10.png" class="swiper-left-image" alt="">
                        <img src="./image/10.png" class="swiper-right-image" alt="">
                    </div>
                </div>
                <!-- <div class="swiper-pagination"></div> -->
            </div>
        </div>


        <div class="section ">
            <img src="./image/5.png" class="sb2" alt="">

            <div class="swiper-container ">
                <div class="swiper-wrapper" style="width: 100vw;">
                    <div class="swiper-slide   flex flex-align-center flex-justify-center">
                        <div class="margin-right" style="margin-top: 64px;">
                            <img src="./image/10.png" class="swiper-left-image " alt="">
                            <img src="./image/10.png" class="swiper-right-image" alt="">
                        </div>
                    </div>
                    <div class="swiper-slide   flex flex-align-center flex-justify-center">
                        <div class="margin-right" style="margin-top: 64px;">
                            <img src="./image/10.png" class="swiper-left-image " alt="">
                            <img src="./image/10.png" class="swiper-right-image" alt="">
                        </div>
                    </div>
                </div>
                <!-- <div class="swiper-pagination"></div> -->
            </div>

        </div>


        <div class="section flex flex-align-center flex-justify-center  ">
            <img class="operation" src="./image/15.png" alt="">

            <div class="flex flex-justify-center ">

                <div class="div" style="margin-right: 60px;">
                    <div class="flex">
                        <img src="./image/10.png" alt="">
                        <img src="./image/11.png" style="width: 178px;height: 178px;" alt="">
                    </div>
                    <div class="align-left ">选择就近的运营中心</div>
                </div>

                <div class="div">
                    <div class="flex flex-align-end ">
                        <img src="./image/14.png" style="width: 178px;height: 178px;" alt="">
                        <img src="./image/10.png" alt="">
                    </div>
                    <div class="align-right">选择就近的运营中心</div>

                </div>
            </div>


        </div>


        <div class="section flex flex-align-center flex-justify-center">
            <div class="flex flex-justify-center"> <img src="./image/16.png"></div>
            <div class="flex flex-align-center" style="margin-top: 20px;">
                <img src="./image/17.png" fit="cover" style="width: 30px;"></img>
                <div style="margin-left:14px;font-size:20px;font-weight: bold;color: #69B35D;"> <span>小匠保</span> | <span
                        style="color: #141414;">八大要点</span>
                </div>
            </div>
            <div class="flex flex-justify-between" style="margin-top: 30px;">
                <div class="guarantee">
                    <div style="font-weight:Bold">· 开放平台 </div>
                    <div style="font-size: 14px;padding:10px 0;">
                        平台汇聚上千的工长、设计师，可直接交流
                    </div>
                    <div style="font-weight:Bold">· 不分包 </div>
                    <div style="font-size: 14px;">
                        去除中间环节，装修项目透明化、责任制
                    </div>
                </div>
                <div class="guarantee">
                    <div style="font-weight:Bold">· 开放平台 </div>
                    <div style="font-size: 14px;padding:10px 0;">
                        平台汇聚上千的工长、设计师，可直接交流
                    </div>
                    <div style="font-weight:Bold">· 不分包 </div>
                    <div style="font-size: 14px;">
                        去除中间环节，装修项目透明化、责任制
                    </div>
                </div>
                <div class="guarantee">
                    <div style="font-weight:Bold">· 开放平台 </div>
                    <div style="font-size: 14px;padding:10px 0;">
                        平台汇聚上千的工长、设计师，可直接交流
                    </div>
                    <div style="font-weight:Bold">· 不分包 </div>
                    <div style="font-size: 14px;">
                        去除中间环节，装修项目透明化、责任制
                    </div>
                </div>
                <div class="guarantee">
                    <div style="font-weight:Bold">· 开放平台 </div>
                    <div style="font-size: 14px;padding:10px 0;">
                        平台汇聚上千的工长、设计师，可直接交流
                    </div>
                    <div style="font-weight:Bold">· 不分包 </div>
                    <div style="font-size: 14px;">
                        去除中间环节，装修项目透明化、责任制
                    </div>
                </div>

            </div>
            <div class="flex flex-align-center" style="margin-top: 20px;">
                <img src="./image/17.png" fit="cover" style="width: 30px;;"></img>
                <div style="margin-left:14px;font-size:20px;font-weight: bold;color: #69B35D;"> <span>管家团队</span> |
                    <span style="color: #141414;">服务承诺</span>
                </div>
            </div>
            <div class="flex flex-justify-between" style="margin-top: 30px;">
                <div class="guarantee">
                    <img src="./image/18.png" alt="">
                </div>
                <div class="guarantee">
                    <img src="./image/18.png" alt="">
                </div>
                <div class="guarantee">
                    <img src="./image/18.png" alt="">
                </div>

            </div>
            <div class="flex flex-justify-between" style="margin-top: 30px;">
                <div class="guarantee">
                    <img src="./image/18.png" alt="">
                </div>
                <div class="guarantee">
                    <img src="./image/18.png" alt="">
                </div>
                <div class="guarantee">
                    <img src="./image/18.png" alt="">
                </div>

            </div>

        </div>


        <div class="section flex flex-align-center flex-justify-center  ">
            <div class="flex flex-justify-center"> <img src="./image/16.png"></div>
            <div class="flex flex-align-center" style="margin-top: 20px;">
                <img src="./image/17.png" fit="cover" style="width: 30px;"></img>
                <div style="margin-left:14px;font-size:20px;font-weight: bold;color: #69B35D;"> <span>小匠监理</span> |
                    <span style="color: #141414;">服务理念</span>
                </div>
            </div>
            <div class="flex flex-justify-around " style="margin: 30px auto;">
                <div class="guarantee">
                    <img src="./image/24.png" alt="">
                    <div style="text-align: center;">施工保障</div>
                </div>
                <div class="guarantee">
                    <img src="./image/24.png" alt="">
                    <div style="text-align: center;">施工保障</div>
                </div>
                <div class="guarantee">
                    <img src="./image/24.png" alt="">
                    <div style="text-align: center;">施工保障</div>
                </div>
                <div class="guarantee">
                    <img src="./image/24.png" alt="">
                    <div style="text-align: center;">施工保障</div>
                </div>

            </div>
            <img src="./image/28.png" alt="" style="margin-top: 80px;">
        </div>


        <div class="section flex flex-align-center flex-justify-center  ">
            <div class="flex flex-justify-center ">
                <img src="./image/39.png" alt="">
            </div>

            <div class="flex flex-justify-around  " style="margin: 60px auto; width: 1300px;">

                <img src="./image/10.png" alt="">
                <img src="./image/10.png" alt="">

                <img src="./image/10.png" alt="">

                <img src="./image/10.png" alt="">

            </div>

        </div>



        <div class="section  ">
            <img src="./image/44.png">
            <div>上海复庭信息技术有限公司 版权所有Copyright 网站备案：沪ICP备15023326号-1 沪公网安备 31011302005175号 组织机构代码证：32456345-9
            </div>
            <span> 中国互联网协会信用评价中心网信认证 服务热线：400-101-9696</span>
        </div>



    </div>











    </div>
    <script src="./js/swiper.min.js"></script>
    <script>


        var swiper = new Swiper('.swiper-container', {
            direction: 'vertical',
            followFinger: false,
            speed: 800,
            mousewheel: true,
            pagination: {
                el: '.swiper-pagination',
            },
            on: {
                init: function (swiper) {
                    slide = this.slides.eq(0);
                    slide.addClass('ani-slide');
                },
                transitionStart: function () {
                    $.fn.fullpage.setAllowScrolling(false);
                    for (i = 0; i < this.slides.length; i++) {
                        slide = this.slides.eq(i);
                        slide.removeClass('ani-slide');
                    }
                },
                transitionEnd: function () {
                    $.fn.fullpage.setAllowScrolling(true);
                    slide = this.slides.eq(this.activeIndex);
                    slide.addClass('ani-slide');

                },
            }
        });






        $(document).ready(function () {


            $('#fullpage').fullpage({
                //options here
                autoScrolling: true,
                scrollHorizontally: true,
                resize: true,
                verticalCentered: false,//内容是否垂直居中
                menu: '#menu',
                // css3:true,


                // index 要离开的页面 nextindex将要去的页面,direction返回的是dom节点上的信息 
                onLeave: function (index, nextindex, direction) {
                    // console.log(nextindex.index)
                    if (nextindex.index == 0) {
                        $('.header').css({ 'color': 'white', 'background': '' })
                        $('.logo').attr('src', './image/logo.png')
                    }
                    if (nextindex.index == 1) {
                        $('.header').css({ 'color': '#141414', 'background': 'white' })
                        $('.logo').attr('src', './image/4.png')
                    }
                },
            });
        });


    </script>
</body>

</html>